<template>
	<!--RFID管理-->
	<div class="rfidmanage">
		<div class="tab-nav">
			<div class="leftnav" v-bind:class="{ check: oneitemcheck }" @click="itemclick(1)"><span v-bind:class="{ check: oneitemcheck }">过往非机动车</span></div>
			<div class="sanjiao" v-bind:class="{ checksanjiao: oneitemcheck }"></div>
		</div>
		<div class="table-layout">
			<div class="search-layout">
				<div><span>车牌检索</span><Input v-model="value" placeholder="输入车牌号" style="width: 10vw;margin-left: 1vw;" class="carplate"/></div>
				<div><span>开始时间</span><DatePicker type="date" placeholder="" style="width: 10vw;margin-left: 1vw;" class="stime"></DatePicker></div>
				<div><span>结束时间</span><DatePicker type="date" placeholder="" style="width: 10vw;margin-left: 1vw;" class="etime"></DatePicker></div>
				<Button type="primary" icon="ios-search" class="finddata">开始查询</Button>
			</div>
			<Table disabled-hover :columns="columns1" :data="data1" class="infodatas"></Table>
			<Page :total="100" class="car-page" @on-change="onchange"/>
		</div>
	</div>
</template>

<script>
	export default {
		name: "rfidmanage",
		data() {
			return {
				columns1:[
					{
						title: '日期',
						key: 'date'
					},
					{
						title: '时间',
						key: 'time'
					},
					{
						title: '用户姓名',
						key: "name",
					},
					{
						title: '车牌号',
						key: 'bikeplate'
					},
					{
						title: '通行情况',
						key: 'state'
					},
					{
						title: '车辆类型',
						key: 'type'
					},
					{
						title: '抓拍图像',
						key: 'imgurl'
					}
				],
				data1:[],
				value:'',
				oneitemcheck:true,
				twoitemchekc:false
			}
		},
		mounted() {
			//初始化一些数据
			this.data1.push({"date":"2019-07-15","time":"09:30","name":"八神1","bikeplate":"浙A89856","state":"离开","type":"临时车","imgurl":""});
			this.data1.push({"date":"2019-07-15","time":"09:30","name":"八神2","bikeplate":"浙A89856","state":"离开","type":"临时车","imgurl":""});
			this.data1.push({"date":"2019-07-15","time":"09:30","name":"八神3","bikeplate":"浙A89856","state":"离开","type":"临时车","imgurl":""});
			this.data1.push({"date":"2019-07-15","time":"09:30","name":"八神4","bikeplate":"浙A89856","state":"离开","type":"临时车","imgurl":""});
			this.data1.push({"date":"2019-07-15","time":"09:30","name":"八神5","bikeplate":"浙A89856","state":"离开","type":"临时车","imgurl":""});
			this.data1.push({"date":"2019-07-15","time":"09:30","name":"八神6","bikeplate":"浙A89856","state":"离开","type":"临时车","imgurl":""});
			this.data1.push({"date":"2019-07-15","time":"09:30","name":"八神7","bikeplate":"浙A89856","state":"离开","type":"临时车","imgurl":""});
			this.data1.push({"date":"2019-07-15","time":"09:30","name":"八神8","bikeplate":"浙A89856","state":"离开","type":"临时车","imgurl":""});
			this.data1.push({"date":"2019-07-15","time":"09:30","name":"八神9","bikeplate":"浙A89856","state":"离开","type":"临时车","imgurl":""});
			this.data1.push({"date":"2019-07-15","time":"09:30","name":"八神10","bikeplate":"浙A89856","state":"离开","type":"临时车","imgurl":""});
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			itemclick(index){
				if(index === 1){
					this.oneitemcheck = true;
					this.twoitemchekc = false;
				}else{
					this.oneitemcheck = false;
					this.twoitemchekc = true;
				}
			},
			onchange(index){
				console.log(index);
			}
		},
		props: []
	}
</script>

<style scoped lang="less">
	@import '../assets/less/uiless.less';
	.rfidmanage{
		display: flex;
		flex-basis: 0;
		.compents_ui();
		.tab-nav{
			.compents_tabnav();
			display: flex;
			flex-direction: column;
			align-items: center;
			flex-basis: 0;
			span{
				color:#ffffff33;
				display: inline-block;
				width: 20px;
				padding: 0 4px;
			}
			.leftnav{
				border:1px solid;
				border-color: @bordcolor transparent transparent @bordcolor;
				background-color: rgba(19,62,117,.3);
			}
			.sanjiao{
				.sanjiao_draw();
			}
			.check{
				background-color: rgba(19,62,117,.8);
				color:white;
			}
			.checksanjiao{
				border-color:rgba(19,62,117,.8) rgba(19,62,117,.8) transparent transparent;
			}
		}
		.table-layout{
			.compents_tablayout();
			.search-layout {
				display: flex;
				align-items: center;
				height: 7vh;
				span {
					.search_layout_span();
				}
			}
			.car-page{
				margin-top: 1vh;
			}
			.finddata{
				margin-left: 1vw;
			}
		}
	}
</style>